<script setup lang="ts">
import type { EchartsUIType } from '@vben/plugins/echarts';

import { onMounted, ref, watch } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';

interface ChartConfig {
  title: string;
  chartType: 'area' | 'bar' | 'line' | 'pie';
  data: any[];
  xAxisData?: string[];
  seriesName?: string;
}

const props = defineProps<{
  config: ChartConfig;
}>();

const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);

const updateChart = () => {
  const { chartType, data, xAxisData, seriesName } = props.config;

  let option: any = {};

  switch (chartType) {
    case 'area':
    case 'line': {
      option = {
        grid: {
          bottom: '10%',
          containLabel: true,
          left: '3%',
          right: '4%',
          top: '4%',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          boundaryGap: false,
          data: xAxisData || ['1月', '2月', '3月', '4月', '5月', '6月'],
          type: 'category',
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          type: 'value',
        },
        series: [
          {
            name: seriesName || '数据',
            type: 'line',
            data: data.length > 0 ? data : [120, 200, 150, 80, 70, 110],
            areaStyle: chartType === 'area' ? {} : undefined,
            smooth: true,
            itemStyle: {
              color: '#5ab1ef',
            },
          },
        ],
      };
      break;
    }

    case 'bar': {
      option = {
        grid: {
          bottom: '10%',
          containLabel: true,
          left: '3%',
          right: '4%',
          top: '4%',
        },
        tooltip: {
          trigger: 'axis',
        },
        xAxis: {
          axisTick: {
            show: false,
          },
          data: xAxisData || ['1月', '2月', '3月', '4月', '5月', '6月'],
          type: 'category',
        },
        yAxis: {
          axisTick: {
            show: false,
          },
          type: 'value',
        },
        series: [
          {
            name: seriesName || '数据',
            type: 'bar',
            data: data.length > 0 ? data : [120, 200, 150, 80, 70, 110],
            itemStyle: {
              color: '#5ab1ef',
            },
          },
        ],
      };
      break;
    }

    case 'pie': {
      option = {
        tooltip: {
          trigger: 'item',
        },
        series: [
          {
            name: seriesName || '数据',
            type: 'pie',
            radius: '60%',
            center: ['50%', '50%'],
            data:
              data.length > 0
                ? data
                : [
                    { value: 1048, name: '搜索引擎' },
                    { value: 735, name: '直接访问' },
                    { value: 580, name: '邮件营销' },
                    { value: 484, name: '联盟广告' },
                    { value: 300, name: '视频广告' },
                  ],
            color: ['#5ab1ef', '#b6a2de', '#67e0e3', '#2ec7c9', '#ffb980'],
            itemStyle: {
              borderRadius: 4,
              borderWidth: 2,
            },
          },
        ],
      };
      break;
    }
  }

  renderEcharts(option);
};

watch(
  () => props.config,
  () => {
    updateChart();
  },
  { deep: true },
);

onMounted(() => {
  updateChart();
});
</script>

<template>
  <div class="chart-card">
    <div class="card-header mb-4">
      <h3 class="text-lg font-semibold text-gray-700">{{ config.title }}</h3>
    </div>
    <div class="chart-container" style="height: 280px">
      <EchartsUI ref="chartRef" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<style scoped>
.chart-card {
  height: 100%;
}
</style>
